<template>
  <div class="chart" ref="chart" style="height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'BarCharts',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    data () {
      this.draw()
    }
  },
  methods: {
    draw () {
      this.chart.clear()
      // const Xdata = []
      // const data = []
      // const lineData = []
      // let total = 0
      // this.data.forEach((item) => {
      //   Xdata.push(item.jb)
      //   data.push(item.num)
      //   total += item.num
      // })
      // this.data.forEach((item) => {
      //   lineData.push((item.num / total * 100).toFixed(2))
      // })

      const img =
        ''

      const trafficWay = this.data

      const data = []
      const color = this.data.length === 3 ? [
        '#37e74d',
        '#ffe000',
        '#FF0000'
      ] : [ '#002673', '#004da8', '#005ce6', '#0070ff', '#73b2ff', '#bed2ff' ]
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
            }
          },
          {
            value: 2,
            name: '',
            itemStyle: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
          }
        )
      }
      const seriesOption = [
        {
          name: '',
          type: 'pie',
          radius: ['55%', '46%'],
          center: ['50%', '50%'],
          label: {
            show: true,
            position: 'outside',
            color: '#333',
            formatter: function (params) {
              var percent = 0
              var total = 0
              for (var i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value
              }
              percent = ((params.value / total) * 100).toFixed(0)
              if (params.name !== '') {
                return (
                  params.name +
                  '\n' +
                  '\n' +
                  percent + '%'
                )
              } else {
                return ''
              }
            }
          },
          labelLine: {
            length: 30,
            length2: 20,
            color: 'auto'
          },
          data: data
        }
      ]
      const option = {
        color: color,
        title: {
          text: '评价结果',
          top: '48%',
          textAlign: 'center',
          left: '49%',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: '400'
          }
        },
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 118,
                height: 118
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            }
          ]
        },
        tooltip: {
          show: true
        },
        series: seriesOption
      }

      this.chart.setOption(option)
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    // this.data.length && this.draw()
    this.draw()
  },
  beforeDestroy () {
    echarts.dispose(this.chart)
    this.chart = null
  }
}
</script>
